<template>
  <div>
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="search" v-show="showSearch">
        <el-form :model="query" ref="queryFormRef" :inline="true" label-width="55px">
          <el-form-item label="产品" prop="productKey">
            <el-select v-model="query.productKey" placeholder="请选择产品" clearable>
              <el-option v-for="item in productOptions" :key="item.productKey" :label="item.name" :value="item.productKey" />
            </el-select>
          </el-form-item>
          <el-form-item label="分组" prop="group">
            <el-select v-model="query.group" placeholder="请选择分组" clearable>
              <el-option v-for="item in groupOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="online">
            <el-select v-model="query.online" placeholder="请选择状态" clearable>
              <el-option v-for="item in onlineOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="query.keyword" placeholder="请输入关键字" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="Plus" @click="handleAdd">
              新增
            </el-button>
            <el-button type="primary" icon="Crop" @click="handleStatus" v-hasPermi="['setting:device:status']">
              灯控状态
            </el-button>
            <el-button type="danger" icon="Delete" :disabled="multipleSelection.length === 0" @click="handleBatchDelete">
              批量删除
            </el-button>
            <el-button type="primary" :disabled="multipleSelection.length === 0" @click="handleToGroup">
              添加设备到组
            </el-button>
            <el-button type="primary" :disabled="multipleSelection.length === 0" @click="handleToUser" v-hasPermi="['setting:deviceUid:add']">
              添加设备到用户
            </el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getData" />
        </el-row>
      </template>
      <el-table v-loading="state.loading" :data="deviceData" @selection-change="onChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="id" align="center" prop="id" v-if="false" />
        <el-table-column label="序号" type="index" align="center" width="70" :index="indexMethod" />
        <el-table-column label="控制" align="center" width="80">
          <template #default="scope"><!--  v-if="operateShow(record)" -->
            <el-button size="small" type="primary" plain @click="handleOperate(scope.row)">控制</el-button>
          </template>
        </el-table-column>
        <el-table-column label="设备自定义名称" prop="deviceCustomName">
          <template #default="scope">
            {{ scope.row.deviceCustomName || '未定义' }}
          </template>
        </el-table-column>
        <el-table-column label="产品" prop="productKey" width="200">
          <template #default="scope">
            {{ getProductName(scope.row.productKey) }}
          </template>
        </el-table-column>
        <el-table-column label="设备类型" prop="type" width="120">
          <template #default="scope">
            {{ getNodeTypeName(scope.row.product) }}
          </template>
        </el-table-column>
        <el-table-column label="设备DN" prop="deviceName" />
        <el-table-column label="分组" prop="group">
          <template #default="scope">
            <el-tag v-for="i,k in scope.row.group" :key="k">{{ i.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="所属用户" prop="uid" width="120">
          <template #default="scope">
            {{ getUserName(scope.row.uid) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="online" align="center" width="80">
          <template #default="scope">
            <el-tag v-if="scope.row.online" type="success" size="small">在线</el-tag>
            <el-tag v-else type="danger" size="small">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createAt" width="180" sortable>
          <template #default="scope">
            <span>{{ parseTime(scope.row.createAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="scope">
            <!-- TODO: 没接口,nodeType无法获取，得改成 ！= 0 -->
            <el-tooltip content="编辑" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
            </el-tooltip>
            <el-divider direction="vertical" />
            <el-tooltip content="子设备" placement="top">
              <el-button link type="info" icon="Box" :disabled="scope.row.nodeType == 0" @click="showChidrenDevices(scope.row)" />
            </el-tooltip>
            <el-divider direction="vertical" />
            <el-tooltip content="详情" placement="top">
              <el-button link type="primary" icon="View" @click="handleView(scope.row)" />
            </el-tooltip>
            <el-divider direction="vertical" />
            <el-tooltip content="删除" placement="top">
              <el-popconfirm title="是否确认删除该数据" @confirm="handleDelete(scope.row)">
                <template #reference>
                  <el-button link type="danger" icon="Delete" />
                </template>
              </el-popconfirm>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="state.total" 
        v-model:page="state.page.pageNum" 
        v-model:limit="state.page.pageSize" 
        @pagination="getData" 
      />
    </el-card>
    <!-- 新增或修改设备对话框 -->
    <el-dialog
      :title="dialog.title"
      v-model="dialog.visible"
      width="600px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
    >
      <el-form ref="deviceFormRef" :model="deviceForm" :rules="rules" label-width="90px">
        <el-form-item label="自定义名称" prop="deviceCustomName">
          <el-input v-model="deviceForm.deviceCustomName" placeholder="请输入设备自定义名称" />
        </el-form-item>
        <el-form-item label="设备DN" prop="deviceName">
          <el-input v-model="deviceForm.deviceName" placeholder="一般为设备mac" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品" prop="productKey">
              <el-select v-model="deviceForm.productKey" placeholder="请选择产品" @change="handleProductChange" :disabled="dialog.title == '编辑'" clearable>
                <el-option v-for="item in productOptions" :key="item.productKey" :label="item.name" :value="item.productKey" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="state.showParentId" label="网关设备" prop="parentId">
              <el-select v-model="deviceForm.parentId" placeholder="子设备可选择父设备" clearable>
                <el-option v-for="item in parentOptions" :key="item.id" :label="item.deviceName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> 
        <el-row v-if="state.showDeviceMap">
          <el-col :span="12">
            <el-form-item label="设备经度" prop="longitude">
              <el-input v-model="deviceForm.longitude" placeholder="请输入设备经度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备纬度" prop="latitude">
              <el-input v-model="deviceForm.latitude" placeholder="请输入设备纬度" />
            </el-form-item>
          </el-col>
        </el-row>
        <Map 
          v-if="state.showDeviceMap"
          :clickMap="true"
          @locateChange="(lnglat) => locateChange(lnglat)" 
          :isWrite="true"
          v-model:center="state.mapLnglat" 
        />
        <el-form-item label="基站定位" v-if="state.showLocationButton">
          <el-button type="primary" plain @click="handleLocation()">查看</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 设备状态对话框 -->
    <deviceStatus ref="deviceStatusRef" />
    <!-- 添加设备到组对话框 -->
    <el-dialog title="添加设备到组" v-model="state.showDeviceToGroup" width="350px" append-to-body>
      <el-row style="align-items: center;">
        <el-col :span="7">
          <span><b> 请选择分组：</b></span>
        </el-col>
        <el-col :span="16">
          <el-select v-model="state.toGroupId" placeholder="请选择分组">
            <el-option v-for="item in groupOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.showDeviceToGroup = false">取 消</el-button>
          <el-button type="primary" @click="handleAddDeviceToDeviceGroup">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加设备到用户对话框 -->
    <el-dialog
      title="添加设备到用户"
      v-model="state.showDeviceToUser"
      width="900px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
      @close="cancel"
    >
      <el-form ref="queryUserRef" :model="queryUser" :inline="true" label-width="80px">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="queryUser.userName" placeholder="请输入用户名称" clearable />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="queryUser.phonenumber" placeholder="请输入手机号码" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQueryUser">搜索</el-button>
          <el-button icon="Refresh" @click="resetQueryUser">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="userData"
        bordered
      >
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="用户名称" prop="userName" align="center" />
        <el-table-column label="用户昵称" prop="nickName" align="center" />
        <el-table-column label="部门" prop="dept.deptName"  align="center" />
        <el-table-column label="手机号码" prop="phonenumber" align="center" />
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button link type="primary" icon="Check" @click="handleAddDeviceToUser(scope.row)">确认</el-button>
          </template>
        </el-table-column> 
      </el-table>
      <pagination
        :total="state.userTotal" 
        v-model:page="state.userPage.pageNum" 
        v-model:limit="state.userPage.pageSize" 
        @pagination="getUserData"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="state.showDeviceToUser = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
    <children-dialog ref="childrenDialogRef" />
    <!-- 4G灯控制电源(新创)操作页面 -->
    <swSl ref="sw_slRef" />
    <!-- 微自然光照传感器操作页面 -->
    <wzrGuanggan ref="wzr_guangganRef" />
    <!-- 微自然网关操作页面 -->
    <wzrGateway ref="wzr_gatewayRef" />
    <!-- 技象Lora网关操作页面 -->
    <el-dialog
      title="分组设置"
      v-model="state.showJxLoraGateway"
      width="700px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
    >
      <jxLoraGateway ref="jx_lora_gatewayRef" :row="state.currentRow" />
    </el-dialog>
    <!-- 光照度传感器 -->
    <opticalSensor ref="opticalSensorRef" />
    <!-- 微自然视觉传感器 -->
    <wzrAishijue ref="wzr_aishijueRef" />
    <!-- 基站定位地图 -->
    <locationMap ref="locationMapRef" />
  </div>
</template>

<script lang="ts" setup>
import { ComponentInternalInstance } from 'vue'
import { getDevicesList, deleteDevices, saveDevices, getParentDevices, deleteBatchDevices, addDeviceToUser } from './api/devices.api'
import { getProductsList, IProductsVO } from './api/products.api'
import { getDeviceGroupsList, addDeviceToDeviceGroup, serviceInvoke, getDevicesDetail } from './api/devices.api'
import { listUser } from '@/api/system/user/index'

import deviceStatus from './components/deviceStatus.vue'
import ChildrenDialog from './modules/childrenDialog.vue'
import swSl from './components/sw_sl.vue'
import wzrGuanggan from './components/wzr_guanggan.vue'
import wzrGateway from './components/wzr_gateway.vue'
import jxLoraGateway from './components/jxLoraGateway.vue'
import opticalSensor from './components/opticalSensor.vue'
import wzrAishijue from './components/wzr_aishijue.vue'
import Map from './components/map.vue'
import locationMap from './components/locationMap.vue'
import { ElPopconfirm, FormInstance } from 'element-plus'
// 引入公共方法判断设备
import { isLightController, isOpticalSensor } from '@/utils/deviceUtils'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const showSearch = ref(true) // 控制搜索区域显示
const queryFormRef = ref<FormInstance>()
const queryUserRef = ref<FormInstance>()

// 状态
const onlineOptions = ref(
  [
    {
      label: '在线',
      value: true,
    },
    {
      label: '离线',
      value: false,
    }
  ]
)
// 新增/编辑弹窗
const dialog = reactive<DialogOption>({
  visible: false,
  title: '',
})
const deviceFormRef = ref<FormInstance>()
const deviceForm = reactive({
  id: '',
  deviceCustomName: '',
  deviceId: '',
  deviceName: '',
  productKey: '',
  parentId: '',
  group: '',
  locate: {
    longitude: '',
    latitude: '',
  },
  longitude: '',
  latitude: '',
})

const state = reactive({
  page: {
    pageSize: 10,
    pageNum: 1,
  },
  total: 0,
  userTotal: 0,
  userPage: {
    pageSize: 10,
    pageNum: 1,
  },
  queryUser: {
    userName: undefined,
    phonenumber: undefined,
  },
  loading: false,
  showJxLoraGateway: false, // 控制技象Lora网关弹窗显示
  currentRow: null, // 当前选中的技象Lora网关设备行数据
  showParentId: false, // 控制父设备选择框显示
  showDeviceMap: false,
  mapLnglat: '' as any,
  // query: {},
  showDeviceToGroup: false,
  showDeviceToUser: false,
  toGroupId: '',
  toUserId: '',
  query: {
    productKey: undefined,
    group: undefined,
    online: undefined,
    keyword: undefined,
  },
  showLocationButton: false, // 控制基站定位按钮显示
  // 需要显示操作按钮的设备，14微波和13光感传感器和16、17回路8、12;18触控屏;19隧道光感,24集控电源
  // operateList: [13, 14, 16, 17, 18, 19, 20, 22, 24],
  rules: {
    deviceId: [{ required: true, message: 'ProductKey不能为空' }],
    productKey: [{ required: true, message: '产品名称不能为空' }],
    deviceName: [{ required: true, message: '设备DN不能为空' }]
  },
})

const { query, rules, queryUser } = toRefs(state)

// 计算序号的方法
const currentPage = computed(() => state.page.pageNum)
const indexMethod = (index: number) => {
  return (currentPage.value - 1) * state.page.pageSize + index + 1 // 计算序号，假设pageSize是你每页的大小
}

// 获取列表数据
const deviceData = ref<any[]>([])
const getData = () => {
  state.loading = true
  getDevicesList({
    ...state.page,
    ...state.query,
  })
    .then((res) => {
      deviceData.value = res.data.rows
      state.total = res.data.total
    })
    .finally(() => {
      state.loading = false
    })
}

/** 新增按钮操作 */
const handleAdd = () => {
  dialog.visible = true
  dialog.title = '新增'
  state.showParentId = false
  state.mapLnglat = ''
  reset()
  handleProductChange(deviceForm.productKey)
}

 /** 设备状态操作 */
const deviceStatusRef = ref()
const handleStatus = () => {
  deviceStatusRef.value.openDialog(deviceData.value)
}

// 多选
const multipleSelection = ref<{ id: string, deviceId: string }[]>([])
const onChange = (data) => {
  multipleSelection.value = data
}

// 批量删除
const handleBatchDelete = async () => {
  ElMessageBox.confirm(
    '确定删除选中的设备吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    state.loading = true
    await deleteBatchDevices(multipleSelection.value.map((m) => m.id))
    ElMessage.success('批量删除成功!')
    state.loading = false
    getData()
  })
}

/** 添加设备到组操作 */
// 添加设备到组按钮
const handleToGroup = () => {
  state.showDeviceToGroup = true
}
// 添加设备到组-确定
const handleAddDeviceToDeviceGroup = () => {
  addDeviceToDeviceGroup({ 
    group: state.toGroupId, 
    devices: multipleSelection.value.map((m) => m.deviceId) 
  }).then((res) => {
    if (res.code == 200) {
      ElMessage.success('添加成功!')
      state.showDeviceToGroup = false
      getData()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

/** 添加设备到用户操作 */
// 添加设备到用户按钮
const handleToUser = () => {
  state.showDeviceToUser= true
  getUserData()
}
// 添加设备到用户-确定
const handleAddDeviceToUser = (row) => {
  addDeviceToUser({ 
    uid: row.id, 
    devIds: multipleSelection.value.map((m) => m.deviceId) 
  }).then((res) => {
    if (res.code == 200) {
      ElMessage.success('添加成功!')
      state.showDeviceToUser = false
      getData()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 获取用户数据
const userData = ref<any[]>([])
const getUserData = async () => {
  const res: any = await listUser(proxy?.addDateRange({
    ...state.userPage,
    ...state.queryUser
  },['', '']))
  userData.value = res.data.rows
  state.userTotal = res.data.total
}

/** 搜索按钮操作 */
const handleQueryUser = () => {
  state.userPage.pageNum = 1
  getUserData()
}
/** 重置按钮操作 */
const resetQueryUser = () => {
  queryUserRef.value?.resetFields()
  handleQueryUser()
}

/** 编辑按钮操作 */
const handleUpdate = (row) => {
  const latitude = row?.locate?.latitude || ''
  const longitude = row?.locate?.longitude || ''
  state.mapLnglat = longitude + ',' + latitude

  dialog.visible = true
  dialog.title = '编辑'
  nextTick(async () => {
    Object.assign(deviceForm, row)
    handleProductChange(deviceForm.productKey)
  })
}

/** 基站定位查看按钮操作 */
const locationMapRef = ref()
const handleLocation = () => {
  getDevicesDetail(deviceForm.id).then((res) => {
    if (res.code !== 200) return
    if (res.data.property?.latitude && res.data.property?.longitude) {
      const locationInfo = {
        latitude: res.data.property.latitude.value,
        longitude: res.data.property.longitude.value
      }
      locationMapRef.value.openDialog(locationInfo)
    }
     else {
      ElMessage.info('该设备无基站定位') 
    }
  })
}

/** 子设备按钮操作 */
const childrenDialogRef = ref()
const showChidrenDevices = (row: any) => {
  childrenDialogRef.value.openDialog(row)
}

/** 详情按钮操作 */
const router = useRouter()
const handleView = (row: any) => {
  if (!row.id) return
  let showMap = false
  productOptions.value.forEach((p) => {
    if (p.productKey == row.productKey) {
      showMap = p.isOpenLocate
    }
  })
  router.push(`deviceDetail/${row.id}?showMap=${showMap}`)
}

/** 删除按钮操作 */
const handleDelete = async (row: any) => {
  state.loading = true
  if (row instanceof Array) {
    await deleteBatchDevices(row.map((m) => m.id))
  } else {
    await deleteDevices(row.id)
  }
  ElMessage.success('删除成功!')
  state.loading = false
  getData()
}

/** 控制按钮操作 */
const sw_slRef = ref()
const wzr_guangganRef = ref()
const wzr_gatewayRef = ref()
const jx_lora_gatewayRef = ref()
const opticalSensorRef = ref()
const wzr_aishijueRef = ref()
const handleOperate = (row: any) => {  
  if (isLightController(row.productKey)) {
    sw_slRef.value.openDialog(row)
  }
  else if (row.productKey === 'wzrguangganqi') { // 微自然光照传感器
    wzr_guangganRef.value.openDialog(row)
  } 
  else if (row.productKey === '7GhmGTj27mehmpaJ') { // 微自然网关
    wzr_gatewayRef.value.openDialog(row)
  } 
  else if (row.productKey === 'sfFiZ4Xmd5axJt3Y') { // 技象Lora网关
    state.currentRow = row
    state.showJxLoraGateway = true
  }
  else if (isOpticalSensor(row.productKey)) { // 光照度传感器
    opticalSensorRef.value.openDialog(row)
  }
  else if (row.productKey === 'wzraishijue') { // 微自然视觉传感器
    wzr_aishijueRef.value.openDialog(row)
  }
}

// 产品字典
const productOptions = ref<IProductsVO[]>([])
// 获取产品下拉框数据
const getProductList = () => {
  getProductsList({
    pageNum: 1,
    pageSize: 99999,
  }).then((res) => {
    productOptions.value = res.data.rows || []
  })
}
getProductList()
// 获取产品名称
const getProductName = (productKey) => {
  const product = productOptions.value.find(p => p.productKey === productKey)
  return product ? product.name : ''
}

// 分组字典
const groupOptions = ref<any[]>([])
// 获取分组下拉框数据
const getGroupsList = () => {
  getDeviceGroupsList({ pageNum: 1, pageSize: 99999, name: '' }).then((res) => {
    groupOptions.value = res.data.rows
  })
}
getGroupsList()

// 获取用户下拉框数据
const userOptions = ref<any[]>([])
const getUserList = async () => {
  const res: any = await listUser(proxy?.addDateRange({pageNum: 1,pageSize: 999,},['', '']))
  userOptions.value = res.data.rows || []
}
getUserList()
// 获取用户名称
const getUserName = (userId) => {
  const user = userOptions.value.find(u => u.id == userId)
  return user? user.nickName : ''
}

// 网关设备
const parentOptions = ref<{ id: string; deviceName: string }[]>([])
// 获取设备类型
const getNodeTypeName = (p) => {
  if (!p) {
    return '直连设备'
  }
  const nodeType = p.nodeType ? p.nodeType : 0
  return ['网关设备', '网关子设备', '直连设备'][nodeType]
}
// 获取网关设备列表
const getParentList = async () => {
  try {
    const res = await getParentDevices()
    parentOptions.value = res.data || []
  } catch (err) {
    console.error(err)
  }
}
getParentList()

// 产品选择变化时，判断是否显示父设备选择框
const handleProductChange = (productKey) => {
  const parent = productOptions.value.find(p => p.productKey === productKey)
  if (productKey && parent?.nodeType == 1) { // 产品为网关子设备时，网关设备表单才显示
    state.showParentId = true
  } else {
    state.showParentId = false
    deviceForm.parentId = ''
  }
  if (productKey && parent?.isOpenLocate && 'manual' == parent?.locateUpdateType){
    state.showDeviceMap = true
  } else {
    state.showDeviceMap = false
  }
  // 基站定位按钮显示与隐藏
  if (dialog.title == '编辑' && parent?.isOpenLocate && 'manual' == parent?.locateUpdateType){
    state.showLocationButton = true
  } else {
    state.showLocationButton = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  state.page.pageNum = 1
  getData()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 提交按钮 */
const submitForm = async () => {
  // 验证表单数据
  await deviceFormRef.value?.validate()
  await saveDevices(toRaw(deviceForm))
  cancel()
  getData()
}
/** 取消按钮 */
const cancel = () => {
  reset()
  dialog.visible = false
  
}
// 表单重置
const reset = () => {
  // 清空表单数据
  deviceForm.id = ''
  deviceForm.deviceCustomName = ''
  deviceForm.deviceId = ''
  deviceForm.deviceName = ''
  deviceForm.productKey = ''
  deviceForm.parentId = ''
  deviceForm.group = ''
  deviceForm.longitude = ''
  deviceForm.latitude = ''
  deviceForm.locate = {
    longitude: '',
    latitude: '',
  },
  deviceFormRef.value?.resetFields()
}

const locateChange = (e) => {
  if (!e) return
  deviceForm.longitude = e[0] || ''
  deviceForm.latitude = e[1] || ''
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
</style>
